<template>
  <div class="app-container">
    <div v-if="!openLinks">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <router-link :to="'/wxmini/page'" class="link-type">
            <el-button icon="el-icon-back" size="mini">
              返 回
            </el-button>
          </router-link>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini"
            @click="handleAdd" v-hasPermi="['module:sections:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single"
            @click="handleUpdate" v-hasPermi="['module:sections:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
            @click="handleDelete" v-hasPermi="['module:sections:remove']">删除</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="sectionList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="行标题" align="center" prop="remark" />
        <el-table-column label="行类型" align="center" prop="sectionTypeName" width="180"/>
        <el-table-column label="每行显示数量" align="center" prop="columnCount" />
        <el-table-column label="显示类型" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.showType === 0" style="cursor: pointer" :type="''">自定义设定内容列表</el-tag>
              <el-tag v-if="scope.row.showType === 1" style="cursor: pointer" :type="''">子分类商品列表</el-tag>
              <el-tag v-if="scope.row.showType === 2" style="cursor: pointer" :type="''">子分类商家列表</el-tag>
              <el-tag v-if="scope.row.showType === 3" style="cursor: pointer" :type="''">单一商家商品列表</el-tag>
              <el-tag v-if="scope.row.showType === 4" style="cursor: pointer" :type="''">单一优惠券列表</el-tag>
              <el-tag v-if="scope.row.showType === 5" style="cursor: pointer" :type="''">内部页面</el-tag>
              <el-tag v-if="scope.row.showType === 6" style="cursor: pointer" :type="''">tab菜单</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否显示标题" align="center">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.isShowTitle === 0" style="cursor: pointer" :type="'info'">不显示</el-tag>
              <el-tag v-else style="cursor: pointer" :type=" '' ">显示</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.state === 0" style="cursor: pointer" :type="''">显示</el-tag>
              <el-tag v-else style="cursor: pointer" :type=" 'info' ">停用</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="投放区域" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.isAllCity === 0" style="cursor: pointer" :type="''">{{'已投放：'+scope.row.cityCount+'个城市'}}</el-tag>
              <el-tag v-else style="cursor: pointer" :type=" '' ">全区域投放</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="排序索引" align="center" prop="sort" />
<!--        <el-table-column label="标题图片" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <a :href="scope.row.titleImgPath" target="_blank" v-if="scope.row.titleImgPath!==undefined && scope.row.titleImgPath!==null && scope.row.titleImgPath!=='null'">-->
<!--              <img :src="scope.row.titleImgPath" title="点击打开" style="width: 100px;height: 60px;">-->
<!--            </a>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="背景图片" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <a :href="scope.row.bgPath" target="_blank" v-if="scope.row.bgPath!==undefined &&  scope.row.bgPath!==null && scope.row.bgPath!=='null'">-->
<!--              <img :src="scope.row.bgPath" title="点击打开" style="width: 100px;height: 60px;">-->
<!--            </a>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
<!--            @click="handleSectionLinks(scope.row)"-->
            <el-button size="mini" type="text" icon="el-icon-edit"
                       v-if="scope.row.showType === 0 || scope.row.showType === 3 || scope.row.showType === 4 || scope.row.showType === 5 || scope.row.showType === 6">
              <router-link :to="'/wxmini/section/links?sectionId=' + scope.row.id+'&menuId=' + titleMenuId" class="link-type">
                配置内容
              </router-link>
            </el-button>

            <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.isAllCity === 0">
              <router-link :to="'/wxmini/section/city?sectionId=' + scope.row.id+'&menuId=' + titleMenuId" class="link-type">
                投放城市
              </router-link>
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['module:sections:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['module:sections:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 添加或修改页面的 内容行  每一行 是一条记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="内容行名称" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入内容行名称" size="mini"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="显示标题" prop="isShowTitle">
              <el-radio-group v-model="form.isShowTitle" size="mini">
                <el-radio :value="0" :label="0">不显示</el-radio>
                <el-radio :value="1" :label="1">显示</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内容行标题" prop="titleName" v-if="form.isShowTitle === 1">
              <el-input v-model="form.titleName" placeholder="请输入内容行标题" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="标题图片" prop="titleImgUrl">
              <single-pic v-model="form.titleImgPath" type="image" @handleChecked="chooseTitleImg" @deleteMaterial="deleteMaterial"
                          :uploadType="2" :num="1" :width="200" :height="40" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标题图片链接" prop="titleImgLinkUrl" v-if="form.titleImgPath !== undefined">
              <el-input v-model="form.titleImgLinkUrl" placeholder="请输入标题图片链接" size="mini"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="内容行类型" prop="sectionType">
              <el-select v-model="form.sectionType" placeholder="请选择行类型" size="mini">
                <el-option v-for="dict in sectionTypeOptions"
                           :key="dict.dictValue"
                           :label="dict.dictLabel"
                           :value="dict.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.sectionType == '1001'">
            <el-form-item label="Banner图片高度" prop="bannerImgHeight">
              <el-input v-model="form.bannerImgHeight" placeholder="请输入Banner图片高度" type="number" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="按钮颜色" prop="buttonColor">
              <el-color-picker v-model="form.buttonColor" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="背景颜色" prop="bgColor">
              <el-color-picker v-model="form.bgColor" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结构类型" prop="columnType">
              <el-radio-group v-model="form.columnType" size="mini">
                <el-radio :value="0" :label="0">默认</el-radio>
                <el-radio :value="1" :label="1">图片上，详情下</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="显示类型" prop="showType">
              <el-select v-model="form.showType" placeholder="请选择显示类型" size="mini">
                <el-option v-for="dict in sectionShowTypeOptions"
                           :key="dict.dictValue"
                           :label="dict.dictLabel"
                           :value="parseInt(dict.dictValue)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.showType > 0">
            <el-form-item label="类型显示数量" prop="showCount">
              <el-input v-model="form.showCount" type="number" placeholder="请输入类型显示数量" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="form.showType > 0">
          <el-col :span="12">
            <el-form-item label="商品分类" prop="showCount" v-if="form.showType == 1">
              <el-select v-model="form.cateChildId" placeholder="请选择商品分类" filterable  size="mini">
                <el-option v-for="type in productTypeOptions"
                           :key="type.id"
                           :label="type.typeName + '(商品数：'+ type.productCount + '个)'"
                           :value="type.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="商家分类" prop="showCount" v-if="form.showType == 2 || form.showType == 3">
              <el-select v-model="form.cateChildId" placeholder="请选择商家分类" filterable  size="mini"  @change="selectProductType">
                <el-option v-for="type in productTypeOptions"
                           :key="type.id"
                           :label="type.typeName + '(商家数：'+ type.merCount + '家)'"
                           :value="type.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.showType == 3">
            <el-form-item label="商家名称" prop="merId">
              <el-select v-model="form.merId" placeholder="请选择商家名称" size="mini" filterable  style="width:100%;">
                <el-option v-for="mer in merListOptions"
                           :key="mer.id"
                           :label="mer.shopName + '(商品数：'+ mer.productCount + '个)'"
                           :value="mer.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" >
            <el-form-item label="是否显示更多" prop="isShowMore">
              <el-radio-group v-model="form.isShowMore" size="mini">
                <el-radio :value="0" :label="0">不显示</el-radio>
                <el-radio :value="1" :label="1">显示</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item v-if="form.isShowMore == 1" label="更多链接" prop="moreLink">
              <el-input v-model="form.moreLink" placeholder="请输入更多链接" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12" >
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="form.state" size="mini">
                <el-radio :value="0" :label="0">正常</el-radio>
                <el-radio :value="1" :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12" >
            <el-form-item label="自定义样式" prop="cssStyle">
              <el-input v-model="form.cssStyle" placeholder="请输入自定义样式" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="排序索引" prop="sort">
              <el-input v-model="form.sort" type="number" placeholder="请输入排序索引" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="每行显示数量" prop="columnCount">
              <el-input v-model="form.columnCount" type="number" placeholder="请输入每行显示的数量" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="投放类型" prop="isAllCity">
              <el-radio-group v-model="form.isAllCity" size="mini">
                <el-radio :value="1" :label="1">全区域投放</el-radio>
                <el-radio :value="0" :label="0">选定投放</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isOpen">
              <el-radio-group v-model="form.isOpen" size="mini">
                <el-radio :value="1" :label="1">开放启用</el-radio>
                <el-radio :value="0" :label="0">关闭权限</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体验版展示" prop="isTest">
              <el-radio-group v-model="form.isTest" size="mini">
                <el-radio :value="0" :label="0">正常版显示</el-radio>
                <el-radio :value="1" :label="1">体验版展示</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listSection, getSection, delSection, addSection, updateSection } from "@/api/module/titlemenu/section";

import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { listAll } from "@/api/module/product/type";
import { listMer} from "@/api/module/mer/mer";

import singlePic from '@/components/SingleMaterial'

export default {
  name: "Section",
  components: {  Treeselect, singlePic},
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalLinks:0,
      totalGoods:0,
      // 页面的 内容行  每一行 是一条记录表格数据
      sectionList: [],
      sectionLinkList: [],
      // 状态数据字典
      statusOptions: [],
      productList:[],
      productTypeOptions:[],
      sectionTypeOptions:[],
      sectionShowTypeOptions:[],
      merListOptions:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      titleLinks: "",
      // 是否显示弹出层
      openLinks: false,
      openLinksEdit:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        titleMenuId:undefined,
      },
      queryParamsLinks: {
        pageNum: 1,
        pageSize: 3,
        sectionId:undefined,
      },
      // 查询参数
      queryParamsMer: {
        pageNum: 1,
        pageSize: 100,
        cateChildId:undefined,
        isShowProduct:1,
      },
      // 表单参数
      form: {},
      formLinks:{},
      // 表单校验
      rules: {

      },
      titleMenuId:0,
    };
  },
  created() {
    console.log('section  this.$route.query',this.$route.query);
    this.titleMenuId = this.$route.query.menuId ? this.$route.query.menuId : 0;
    this.form.titleMenuId = this.titleMenuId;
    this.queryParams.titleMenuId = this.titleMenuId;
    this.getList();
    this.getProductTypeList();
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("section_type").then(response => {
      this.sectionTypeOptions = response.data;
    });
    this.getDicts("section_show_type").then(response => {
      this.sectionShowTypeOptions = response.data;
    });

  },
  methods: {
    chooseImg(data){
      console.log("menu chooseImg",data);
      if(data.length > 0) {
        this.formLinks.imgUrlPath = data[0].imgUrl;
        this.formLinks.imgUrl = data[0].url;
      }
    },
    /** 查询页面的 内容行  每一行 是一条记录列表 */
    getList() {
      this.loading = true;
      listSection(this.queryParams).then(response => {
        this.sectionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    selectProductType(val){
      console.log("selectProductType",val);
      this.queryParamsMer.cateChildId = val;
      this.getMerList();
    },
    getMerList() {
      listMer(this.queryParamsMer).then(response => {
        this.merListOptions = response.rows;
      });
    },
    getProductTypeList() {
      listAll(this.queryParamsPType).then(res => {
        this.productTypeOptions = res.data;
      })
    },
    chooseTitleImg(data){
      console.log("section chooseTitleImg",data);
      if(data.length > 0) {
        this.form.titleImgPath = data[0].imgUrl;
        this.form.titleImgUrl = data[0].url;
      }
    },
    deleteMaterial(){
      this.form.titleImgPath = undefined;
      this.form.titleImgUrl = undefined;
    },
    chooseSectionImg(data){
      console.log("section chooseSectionImg",data);
      if(data.length > 0) {
        this.form.bgPath = data[0].imgUrl;
        this.form.bgUrl = data[0].url;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        titleMenuId: this.titleMenuId,
        sectionType: undefined,
        buttonColor: undefined,
        bgColor: undefined,
        state: undefined,
        sort: undefined,
        remark: undefined,
        bgUrl: undefined,
        bgPath: undefined,
        isShowTitle:undefined,
        titleName:undefined,
        titleImgUrl: undefined,
        titleImgPath: undefined,
        titleImgLinkUrl:undefined,
        bannerImgHeight:undefined,
        columnCount: undefined,
        columnType:undefined,
        cateChildId:undefined,
        showType:undefined,
        showCount:undefined,
        merId:undefined,
        isShowMore:undefined,
        moreLink:undefined,
        cssStyle:undefined,
        isAllCity:undefined,
        isOpen:undefined,
        isTest:undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length!==1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加页面内容行";
      console.log('this.form',this.form)
    },
    uploadCallBack(data){
      console.log('uploadCallBack',data);
      if(data.type === 'upload'){

      }else if(data.type === 'remove'){

      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getSection(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.merListOptions = response.data.mers;
        this.open = true;
        this.title = "修改页面内容行";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateSection(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addSection(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除页面内容行编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.loading = true;
          return delSection(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
  }
};
</script>
